<template>
  <el-row>
    <el-dialog title="素材详细信息" :visible.sync="dialogVisible" :modal-append-to-body="false"
               :close-on-click-modal="false" :before-close="handleClose" :append-to-body="true"
               v-if="dialogVisible" width="60%">
      <!--锚点跳转-->
      <el-row>
        <el-button id="id-offer-componets-creativecheck-commentJump"
                   style="float: right;margin-right: 10%" type="success" size="mini" @click="commentJump">
          发表评论
        </el-button>
      </el-row>
      <div style="display: flex">
        <div style="width: 50%;height: 500px;background: #f0f2f5;padding: 4px;">
          <el-row>
            <div class="createUrl">
              <el-image v-if="form.type === '图片'" fit="scale-down" style="height: auto;width: auto;max-height: 100%;max-width: 100%"
                        :src="form.creativeUrl" @click="openCreativeDetail(form.type,form.creativeUrl)">
              </el-image>
              <el-image v-if="form.type === '视频' &&  form.creativeUrl.toLowerCase().indexOf('gif') !== -1" fit="scale-down" style="height: auto;width: auto;max-height: 100%;max-width: 100%"
                        :src="form.creativeUrl" @click="openCreativeDetail(form.type,form.creativeUrl)">
              </el-image>
              <video v-else-if="form.type === '视频'" style="height:auto;width: auto;max-height: 100%;max-width: 100%" :src="form.creativeUrl"
                     @click="openCreativeDetail(form.type,form.creativeUrl)"></video>
            </div>
          </el-row>
        </div>
        <div style="width: 49%;padding: 3px;margin-left: 2%;border: 2px solid rgb(240, 242, 245);border-radius: 7px;height: 500px;flex-direction:column">
          <el-row class="detail" style="margin-top: 50px;margin-left: -10px">
            <el-col span="12" class="detail_form_item">id : {{ form.shortId }}</el-col>
            <el-col span="12" class="detail_form_item">素材名称 : {{ form.name }}</el-col>
            <el-col span="12" class="detail_form_item">类型 : {{ form.type }}</el-col>
            <el-col span="12" class="detail_form_item">本地文件名 : {{ form.localFilename }}</el-col>
            <el-col span="12" class="detail_form_item">设计者 : {{ form.designer }}</el-col>
            <el-col span="12" class="detail_form_item" v-if="form.originator != null && form.originator.length > 0">原创者 : {{ form.originator }}</el-col>
            <el-col span="12" class="detail_form_item">媒体 : {{ form.platform }}</el-col>
            <el-col v-if="form.type === '图片'" span="12" class="detail_form_item">素材尺寸 : {{ form.screenSize }}</el-col>
            <el-col span="12" class="detail_form_item">标签 : {{ form.tags }}</el-col>
            <el-col v-if="form.type === '视频'" span="12" class="detail_form_item">素材时长 : {{ form.length }}</el-col>
            <el-col v-if="form.type === '视频'" span="12" class="detail_form_item">油管连接 :<a> {{ form.youtubeLink }} </a> </el-col>
            <el-col span="12" class="detail_form_item">版本 : {{ form.version }}</el-col>
            <el-col span="12" class="detail_form_item">首次使用时间 : {{ form.firstUseTime }}</el-col>
            <el-col span="12" class="detail_form_item">状态 : {{ form.status }}</el-col>
            <el-col span="12" class="detail_form_item" v-if="form.ownedDemandName != null && form.ownedDemandName != ''">需求名称 : {{ form.ownedDemandName }}</el-col>
          </el-row>
        </div>
      </div>




      <!--详情信息-->
<!--      <el-row class="detail" style="margin-top: 20px;">-->
<!--        <el-col span="12" class="detail_form_item">id : {{ form.id }}</el-col>-->
<!--        <el-col span="12" class="detail_form_item">素材名称 : {{ form.name }}</el-col>-->
<!--        <el-col span="12" class="detail_form_item">类型 : {{ form.type }}</el-col>-->
<!--        <el-col span="12" class="detail_form_item">本地文件名 : {{ form.localFilename }}</el-col>-->
<!--        <el-col span="12" class="detail_form_item">设计者 : {{ form.designer }}</el-col>-->
<!--        <el-col span="12" class="detail_form_item" v-if="form.originator != null && form.originator.length > 0">原创者 : {{ form.originator }}</el-col>-->
<!--        <el-col span="12" class="detail_form_item">媒体 : {{ form.platform }}</el-col>-->
<!--        <el-col v-if="form.type === '图片'" span="12" class="detail_form_item">素材尺寸 : {{ form.screenSize }}</el-col>-->
<!--        <el-col span="12" class="detail_form_item">标签 : {{ form.tags }}</el-col>-->
<!--        <el-col v-if="form.type === '视频'" span="12" class="detail_form_item">素材时长 : {{ form.length }}</el-col>-->
<!--        <el-col v-if="form.type === '视频'" span="12" class="detail_form_item">油管连接 :<a> {{ form.youtubeLink }} </a> </el-col>-->
<!--        <el-col span="12" class="detail_form_item">版本 : {{ form.version }}</el-col>-->
<!--        <el-col span="12" class="detail_form_item">首次使用时间 : {{ form.firstUseTime }}</el-col>-->
<!--        <el-col span="12" class="detail_form_item">状态 : {{ form.status }}</el-col>-->
<!--        <el-col span="12" class="detail_form_item" v-if="form.ownedDemandName != null && form.ownedDemandName != ''">需求名称 : {{ form.ownedDemandName }}</el-col>-->
<!--      </el-row>-->
<!--      &lt;!&ndash;详情素材&ndash;&gt;-->
<!--      <el-row style="margin-top: 20px">-->
<!--        <div class="createUrl">-->
<!--          <el-image v-if="form.type === '图片'" fit="scale-down" style="height: 100%;width: auto"-->
<!--                    :src="form.creativeUrl" @click="openCreativeDetail(form.type,form.creativeUrl)">-->
<!--          </el-image>-->
<!--          <video v-if="form.type === '视频'" style="height: 100%;width: auto" :src="form.creativeUrl"-->
<!--                 @click="openCreativeDetail(form.type,form.creativeUrl)"></video>-->
<!--        </div>-->
<!--      </el-row>-->
      <!--提交信息-->
      <el-row>
        <div style="width: 74%;margin: 0 auto;margin-top: 25px">
         <span style="float: left">
           提交信息
         </span>
<!--          <span style="text-align: right;color:#6495ED;float: right;cursor:pointer" @click="checkAllVersion(form.id)">-->
<!--           查看所有版本-->
<!--         </span>-->
        </div>
        <div style="width: 74%;margin: 0 auto; margin-top: 20px;">
          <el-table :data="infoData" style="width: 100%">
            <el-table-column prop="id" label="id"/>
            <el-table-column prop="submittedTime" label="提交时间"/>
            <el-table-column prop="auditStatus" label="审核结果">
              <template slot-scope="scope">{{statusChange(scope.row.auditStatus)}}</template>
            </el-table-column>
            <el-table-column prop="auditor" label="审核人">
              <template slot-scope="scope">
                {{scope.row.auditor}}
              </template>
            </el-table-column>
            <el-table-column prop="approvedTime" label="审核时间"/>
          </el-table>
        </div>
      </el-row>
      <!--设计思路-->
      <el-row>
        <div style="width: 74%;margin: 0 auto; margin-top: 20px;">
          <div style="margin-bottom: 10px">设计思路</div>
          <el-input id="id-offer-componets-creativecheck-thought"  type="textarea" disabled style="color: black !important;" v-model="form.thought"
                    :autosize="{minRows: 4}"></el-input>
        </div>
      </el-row>
<!--      审核建议-->
      <el-row>
        <div style="width: 74%;margin: 0 auto; margin-top: 20px;">
          <div style="margin-bottom: 10px">审核建议</div>
          <el-input id="id-offer-componets-creativecheck-comment"  type="textarea" disabled style="color: black !important;" v-model="this.comment"></el-input>
        </div>
      </el-row>

      <el-row>
        <div style="width: 74%;margin: 0 auto; margin-top: 20px;">
          <div style="margin-bottom: 10px">备注:</div>
          <el-input id="id-offer-componets-creativecheck-thought"  type="textarea" disabled style="color: black !important;" v-model="form.remark"></el-input>
        </div>
      </el-row>
      <!--评论发表功能-->
      <el-row id="comment">
        <div style="width: 74%;margin: 0 auto; margin-top: 20px;">
          <div>发表你的评论</div>
          <div style="margin-top: 20px">
            <el-popover
              id="id-offer-componets-creativecheck-emojiShow"
              placement="bottom"
              title="标题"
              width="500"
              height="700"
              trigger="click"
              v-model="emojiShow"
            >
              <el-button id="id-offer-componets-creativecheck-reference"  size="mini" slot="reference">😀</el-button>
              <div class="browBox">
                <ul>
                  <li
                    v-for="(item, index) in faceList"
                    :key="index"
                    @click="getBrow(index)"
                  >
                    {{ item }}
                  </li>
                </ul>
              </div>
            </el-popover>
            <el-button
              id="id-offer-componets-creativecheck-submitMessage"
              class="submit-btn"
              type="primary"
              @click="submitMessage"
              size="mini"
              :disabled="comments === ''"
            >发送
            </el-button>
            <el-input
              id="id-offer-componets-creativecheck-submitMessage-two"
              :autosize="{ minRows: 5}"
              type="textarea"
              placeholder="请输入内容"
              @keyup.enter.native="submitMessage"
              v-model="comments"
            >
            </el-input>
          </div>
        </div>
      </el-row>
      <!--评论查看-->
      <el-row>
        <div style="width: 74%;margin: 0 auto; margin-top: 20px;">
          <div v-for="(item,index) in commentList" :key="index" style="margin-top: 10px">
            <div style="height: 20px">
              <div style="width: 20px;height:20px;margin-right: 8px;float: left">
                <img :src="item.avatar" style="width: 100%;height: 100%;border-radius:50%">
              </div>
              <div style="margin-right: 8px;float: left"><span>{{ item.name }}</span></div>
              <div style="margin-right: 8px;float: left"><span>{{ dateMoment(item.updateTime) }}</span></div>
              <div v-if="userInfo.userId === item.userId" style="float: right;margin-right: 20px" @click="removeMessage(item.id)">
                <i class="el-icon-delete"></i>
              </div>
            </div>
            <div style="margin-top: 10px; margin-bottom: 30px">
              <div v-html="item.comments"></div>
              <!--<el-input id="id-offer-componets-creativecheck-comments"-->
              <!--          v-model="item.comments" type="textarea" disabled style="color: black !important;"-->
              <!--          :autosize="{minRows: 2}">-->
              <!--</el-input>-->
            </div>
          </div>
          <div style="margin: 20px;">
            <div style="margin: 0 auto;width: 120px">
              <el-button id="id-offer-componets-creativecheck-getMoreContent" size="mini" style="text-align: center" @click="getMoreContent()" v-if="concealComment">
                查看更多评价
              </el-button>
            </div>
          </div>
        </div>
      </el-row>
    </el-dialog>
    <!--素材详细信息-->
    <el-dialog title="素材详细信息" :visible.sync="creativeDetail" :modal-append-to-body="false" top="0px;"
               :close-on-click-modal="false" :before-close="handleDetailClose" :append-to-body="true" width="60%">
      <div>
        <img v-if="detailType === '图片'" :src="detailCreative" :style="previewStyle()">
        <img v-if="detailType === '视频'&&detailCreative.toLowerCase().indexOf('gif') !== -1" :src="detailCreative" :style="previewStyle()">
        <video v-else-if="detailType === '视频' " ref="video" :src="detailCreative" :style="previewStyle()"
               controls="controls"></video>
      </div>
    </el-dialog>
    <!--查看所有版本-->
    <el-dialog title="查看所有版本" :visible.sync="allVersionDialog" :modal-append-to-body="false"
               :close-on-click-modal="false" :before-close="handleAllVersionDetailClose" :append-to-body="true"width="60%">
      <el-row class="detail" style="margin-top: 20px;">
        <el-col span="12" class="detail_form_item">父素材id: {{ form.id }}</el-col>
        <el-col span="12" class="detail_form_item">父素材名称: {{ form.name }}</el-col>
      </el-row>
      <el-row style="margin-top: 20px">
        <el-timeline>
          <el-timeline-item v-for="(item,index) in allVersionList" :key="index" :timestamp="item.version"
                            placement="top">
            <el-card style="border: 2px solid #EBEEF5 !important;">
              <el-row class="detail" style="margin-top: 20px;">
                <el-col span="12" class="detail_form_item">提交时间:{{ form.id }}</el-col>
                <el-col span="12" class="detail_form_item">审核状态:{{ form.name }}</el-col>
              </el-row>
              <el-row>
                <el-col span="12">
                  <div class="commentUrl" >
                    <el-image v-show="form.type === 'image'" fit="scale-down"
                              style="max-height: 100%;width: auto;max-width:100%;height: auto"
                              :src="form.url" @click="openCreativeDetail">
                    </el-image>
                    <video v-show="form.type === 'video'" style="height: 100%;width: auto" :src="form.url" @click="openCreativeDetail"></video>
                  </div>
                </el-col>
                <el-col span="12">
                  <el-col >设计者:{{ form.localFilename }}</el-col>
                  <el-col >媒体:{{ form.platform }}</el-col>
                  <el-col >设计思路:{{ form.designer }}</el-col>
                </el-col>
              </el-row>
<!--              <el-row style="width: 80%;margin: 0 auto">-->
<!--                <div v-for="(item,index) in commentList" :key="index" style="margin-top: 10px">-->
<!--                  <div style="height: 20px">-->
<!--                    <div style="width: 20px;height:20px;margin-right: 8px;float: left">-->
<!--                      <img :src="item.titleUrl" style="width: 100%;height: 100%;border-radius:50%">-->
<!--                    </div>-->
<!--                    <div style="margin-right: 8px;float: left"><span>{{ item.name }}</span></div>-->
<!--                    <div style="margin-right: 8px;float: left"><span>{{ item.date }}</span></div>-->
<!--                    <div style="float: right;margin-right: 20px">-->
<!--                      <i class="el-icon-delete"></i>-->
<!--                    </div>-->
<!--                  </div>-->
<!--                  <div style="margin-top: 10px">-->
<!--                    <el-input v-model="item.comments" type="textarea" disabled style="color: black !important;"-->
<!--                              :autosize="{minRows: 2}">-->
<!--                    </el-input>-->
<!--                  </div>-->
<!--                </div>-->
<!--              </el-row>-->

<!--              <el-row style="margin-top: 10px">-->
<!--                <div style="float: right;color: #3a8ee6">查看更多</div>-->
<!--              </el-row>-->
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </el-row>
    </el-dialog>

  </el-row>
</template>
<script>
import { sendMessage , getMessageList , removeMessage , getInfoData , getDesigner } from "@/api/offer/creative"
import {getAllUser} from "@/api/user"
import Moment from "moment"
import {mapGetters} from "vuex";
import {getAllVersionInfo} from "@/api/offer/creative";


const typeList = [
  {label: '图片', value: 0},
  {label: '视频', value: 1},
]
const statusList = [
  {label: '等待提交', value: 0},
  {label: '等待审核', value: 1},
  {label: '审核通过', value: 2},
  {label: '审核拒绝', value: 3},
  {label: '禁用', value: 4}
]
const auditStatusList = [
  {label: '待审核', value: 0},
  {label: '完成', value: 1},
  {label: '已过期', value: 3},
]
const appData = require("@/config/emojis.json");
export default {
  name: 'creativeCheck',
  props: {
    comment: {
      type: String
    },
    dialogVisible: {
      type: String | Boolean
    },
    dataList:{
      type:Object,
    }
  },
  watch:{
    dataList:{
      deep:true,
      handler(val,old){
        if(val === old){
          return
        }
        this.form = val
        typeList.map(item=>{
          if(item.value == this.form.type){
            this.form.type = item.label
          }
        })
        statusList.map(item =>{
          if(item.value == this.form.status){
            this.form.status = item.label
          }
        })
        this.form.designer = this.form.designer.split(',')
        let designerList = []
        this.designerList.map(item =>{
          this.form.designer.map(i =>{
            if(item.id === i){
              designerList.push(item.realName)
            }
          })
        })
        this.form.designer = designerList.join(',')

        this.form.originator = this.form.originator.split(',')
        let originatorList = []
        this.originatorList.map(i => {
          this.form.originator.map(j => {
            if (i.id === j) {
              originatorList.push(i.realName)
            }
          })
        })
        this.form.originator = originatorList.join(',')

          this.getMoreContent(this.page.size);
        this.getInfoData()

      }
    }
  },
  computed : {
    ...mapGetters(["userInfo"]),
  },
  data() {
    return {
      concealComment: false,
      designerList:[],
      originatorList: [],
      form: {
        id: '',
        name: '',
        type: '',
        localFilename: '',
        platform: '',
        designer: '',
        fileSize: '',
        tags: '',
        time: '',
        firstTime: "",
        status: '',
        version: '',
        thought: '',
        creativeUrl: '',
        originator: '',
        ownedDemandName: '',
        remark:'',
      },//获取form
      comments: '',//评价主题
      emojiShow: false,//表情框是否展示
      faceList: [],//表情列表
      getBrowString: '',//表情文本
      infoData: [],//提交信息
      commentList: [],//评论列表
      creativeDetail: false,//素材详情
      allVersionDialog: false,//全部版本
      allVersionList: [],//全部版本列表
      detailCreative:'',//打开素材详情
      detailType:'',//打开素材类型
      page:{
        current:1 ,
        size:0,
      },
      offerList:[],//offer列表
    }
  },
  created() {
    this.loadEmojis();
    getAllUser({statusList: '0,1,2', isAll: true}).then(res => {
      this.designerList = res.data.data
      this.originatorList = res.data.data
    })
  },
  methods: {
    previewStyle() {
      let height = ((window.innerHeight < 300)?300:(window.innerHeight - 160));
      return {
        maxWidth: '100%',
        maxHeight: height + 'px'
      };
    },
    //素材详情信息,提交信息审核状态
    statusChange(val){
      let label
      auditStatusList.map(item =>{
        if(item.value == val){
          label =  item.label
        }
      })
      return label
    },
    //获取提交信息
    getInfoData(){
      getInfoData(this.form.id).then(res =>{
        if(res.data.success){
          this.infoData = res.data.data
        }else{
          this.infoData = []
        }
      })
    },
    //删除评论
    removeMessage(id){
      removeMessage(id).then(res =>{
        if(res.data.success){
          this.$message({
            type:'success',
            message:'评论删除成功'
          });
          this.getMoreContent(this.page.size)
        }
      })
    },
    //格式化日期
    dateMoment(val){
      return Moment(val).format('LL')
    },
    //加载表情,存放到表情列表中
    loadEmojis() {
      for (let i in appData) {
        this.faceList.push(appData[i].char);
      }
    },
    //锚点跳转
    commentJump() {
      document.querySelector("#comment").scrollIntoView(true);
    },
    //窗口关闭
    handleClose() {
      this.comments = ''
      this.page = {
        current:1 ,
        size:0,
      }
      this.$emit('close-dialog')
    },
    getBrow(index) {
      for (let i in this.faceList) {
        if (index == i) {
          this.getBrowString = this.faceList[index];
          this.comments += this.getBrowString;

        }
      }
      this.emojiShow = false;
    },
    //提交评价
    submitMessage() {
      let data = {
        comments:this.comments,
        creativeId:this.form.id,
      }
      sendMessage(data).then(res =>{
        if(res.data.success){
          this.getMoreContent(this.page.size)
          this.comments = ''
        }
      })
    },
    //获取更多评价
    getMoreContent(val) {
      let params = {
        creativeId:this.form.id,
        version: this.form.version
      }
      if(!(val > 0)){
        this.page.size += 10
        getMessageList(this.page.current,this.page.size,params).then(res =>{
          this.commentList = res.data.data.records
          if (this.commentList.length < res.data.data.total){
            this.concealComment = true
          }else {
            this.concealComment = false
          }
        })
      }else{
        getMessageList(this.page.current,val,params).then(res =>{
          this.commentList = res.data.data.records
        })
      }
    },
    //打开素材详情
    openCreativeDetail(type,url) {
      this.creativeDetail = true
      this.detailCreative = url
      this.detailType = type
    },
    //关闭素材素材
    handleDetailClose() {
      this.creativeDetail = false
      this.$refs.video.pause();
    },
    //查看所有版本
    checkAllVersion(creativeId) {
      this.allVersionDialog = true
      getAllVersionInfo(creativeId)
    },
    //关闭所有版本窗口
    handleAllVersionDetailClose() {
      this.allVersionDialog = false
    }
  }
}
</script>
<style lang="scss">

.detail {
  width: 80%;
  margin: 0 auto ;
}

.detail_form_item {
  margin-top: 5px;
  padding-left: 10%;
}

.createUrl {
  width: 90%;
  height: 500px;
  margin: 0 auto;
  border: 2px solid #F0F2F5;
  background-color: #F0F2F5;
  border-radius: 9px;
  display: flex;
  img{
    justify-content: center;
    align-items: center;
  }
  video{
    justify-content: center;
    align-items: center;
  }
}

.commentUrl{
  width: 72%;
  height: 100px;
  margin: 0 auto;
  padding: 5px;
  border: 2px solid #F0F2F5;
  background-color: #F0F2F5;
  border-radius: 9px;
}

.el-textarea.is-disabled .el-textarea__inner {
  color: black !important;
}

.browBox {
  width: 100%;
  height: 200px;
  background: #e6e6e6;
  position: absolute;
  z-index: 100;
  bottom: 0px;
  overflow: scroll;

  ul {
    display: flex;
    flex-wrap: wrap;
    padding: 10px;

    li {
      cursor: pointer;
      width: 10%;
      font-size: 26px;
      list-style: none;
      text-align: center;
    }
  }
}

.submit-btn {
  margin: 0 15px 10px 0;
  float: right;
}
</style>
